<template>
    <div class="message">
        <c-header title="消息" leftType="menu"></c-header>
        <section class="body">
            <div class="tab_box">
                <ul class="tab_ul">
                    <li @click="tabNum = 1" :class="tabClass(1)">已读消息</li>
                    <li @click="tabNum = 2" :class="tabClass(2)">未读消息</li>
                </ul>
                <div class="content" :class="tabClass(1)">
                    <div class="noDate">
                        暂无已读消息!
                    </div>
                </div>
                <div class="content" :class="tabClass(2)">
                    <div class="noDate">
                        暂无未读消息!
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import * as API from '../api'
import permissions from '@/common/permissions';
import cHeader from './Header'

export default {
    name: 'message',
    data() {
        return {
            btnLoading: false,
            tabNum: 1,
        }
    },
    components: {
        cHeader
    },
    created() {
        var tthis = this;
    },
    activated() {},
    methods: {

        tabClass(num) {
            if (this.tabNum == num) {
                return 'selected';
            }
        },

        logout() {
            if (confirm('确定退出登录?')) {
                Util.clearAllStroage();
                this.$router.push({
                    name: 'login'
                })
            } else {
                console.log('n')
            }
        }

    }
}

</script>
<style lang="less" scoped>
.body {
    /*padding: 0 20px;*/
    // background: #f1f1f1;
}


.tab_box {

    .tab_ul {
        width: 100%;
        height: 42px;
        line-height: 42px;
    }
    .tab_ul li {
        width: 50%;
        height: 42px;
        float: left;
        text-align: center;
        font-weight: 700;
        border-bottom: 1px solid #e2e2e2;
    }
    .tab_ul li:first-child {
        border-right: 1px solid #e2e2e2;
        width: calc(50% - 1px);
    }
    .tab_ul li.selected {
        color: #ff5a5f;
        border-bottom: 2px solid #ff5a5f;
    }

    .content {
        display: none;
    }

    .content.selected {
        display: block;
    }

    .content .noDate {
        padding-top: 40px;
        text-align: center;
        font-size: 16px;
    }

    .content li {
        height: 74px;
        border-bottom: 1px solid #e2e2e2;
    }
    .avatar {
        float: left;
        width: 50px;
        height: 50px;
        margin-left: 12px;
        margin-top: 12px;
        border-radius: 50%;
        overflow: hidden;
    }

    .content .info {
        padding-top: 16px;
        padding-left: 15px;
        overflow: hidden;
    }
    .content .info p {
        font-weight: 600;
        font-size: 15px;
        color: #333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .content .info span {
        color: #999;
    }

    .content .info .time {
        padding-top: 10px;
        font-size: 12px;
        float: right;
        padding-right: 10px;
    }
}

</style>
